<template>
  <div>
    <div class="navLeadSty">
      <div class="oneDiv"></div>
      <div class="twoDiv"></div>
      <div>数据导入概览</div>
    </div>
    <div class="model-box">
      <div class="modelTabSty">
        <div>
          <div class="nameSty">{{ info.buildingName || "--" }} 设备数统计</div>
          <div class="tabSty" v-for="(item, index) in successful" :key="index">
            <div class="roundSty" :class="{ bgOne: index < 3 }">
              {{ index + 1 }}
            </div>
            <div class="tabNameSty">{{ item.deviceName }}</div>
            <div>{{ item.count }}</div>
          </div>
        </div>
        <div>
          <div class="nameSty">{{ info.buildingName || "--" }} 异常数据统计</div>
          <div class="tabSty" v-for="(item, index) in failed" :key="index">
            <div class="roundSty" :class="{ bgOne: index < 3 }">
              {{ index + 1 }}
            </div>
            <div class="tabNameSty">{{ item.deviceName }}</div>
            <div>{{ item.count }}</div>
          </div>
        </div>
      </div>
      <div class="right-btn">
        <el-button type="primary" @click="handleKeySet">去添加关键字设定</el-button>
      </div>
    </div>
    <div style="display: flex; justify-content: center; margin-top: 1rem">
      <el-button
        size="medium"
        plain
        icon="el-icon-back"
        style="margin-right: 1rem"
        @click="handleLast"
      >
        上一步
      </el-button>
      <el-button
        size="medium"
        icon="el-icon-folder-checked"
        type="primary"
        @click="handleSubmit"
      >
        提交
      </el-button>
    </div>
  </div>
</template>
<script>
import { getAiPredictCount, saveAiPredict } from "@/api/system/ai";
export default {
  data() {
    return {
      info: {}, // 表单信息
      successful: [], // 成功列表
      failed: [], // 失败列表
    };
  },
  methods: {
    // 初始化数据
    init(info) {
      this.info = info;
      this.getList();
    },
    // 获取AI识别数据
    getList() {
      getAiPredictCount(this.info.buildingId).then((res) => {
        this.successful = res.data.successful;
        this.failed = res.data.failed;
      });
    },
    // 提交
    handleSubmit() {
      saveAiPredict(this.info.buildingId).then((res) => {
        if (res.code == 200) {
          this.$emit("refresh", {
            step: 3,
            success: true,
            form: this.info,
          });
        }
      });
    },
    // 返回上一步
    handleLast() {
      this.$cache.local.setJSON("ai-predict", {
        step: 2,
        form: this.info,
      });
      this.$emit("refresh", { step: 2, form: this.info });
    },
    // 关键字设定
    handleKeySet() {
      this.$router.push({
        path: "/ai-to-lead/keyword-comparison",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.navLeadSty {
  display: flex;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 0.5px solid rgb(102, 102, 102);
  padding-bottom: 0.3rem;
  .oneDiv {
    width: 0.5rem;
    height: 1.5rem;
    background: rgb(68, 142, 247);
  }
  .twoDiv {
    width: 0.2rem;
    height: 1.5rem;
    background: rgb(162, 199, 251);
    margin: 0 0.2rem;
  }
}
.model-box {
  display: flex;
  .modelTabSty {
    flex: 4;
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    .nameSty {
      font-size: 16px;
      font-weight: bold;
      margin: 2rem 0;
    }
    .roundSty {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      text-align: center;
      line-height: 1.2rem;
      margin-top: 0.4rem;
      background: rgb(240, 242, 245);
      color: black;
    }
    .bgOne {
      background: rgb(53, 69, 87);
      color: white;
    }
    .tabSty {
      display: flex;
      margin: 0.5rem 0;
      line-height: 2rem;
    }
    .tabNameSty {
      width: 15rem;
      margin: 0 0.5rem;
    }
  }
  .right-btn {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
